<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>

	</style>
</head>
<body>
	
	<ul id="example-2">
	  <li v-for="(item, index) in items">
	    {{ parentMessage }} - {{ index }} - {{ item.message }}
	  </li>
	</ul>

	<hr>

	<ul id="example-22">
	  <template v-for="item in items">
	    <li>{{ item.message }}</li>
	    <li class="divider"></li>
	  </template>
	</ul>

	<hr>

	<ul id="repeat-object">
	  <li v-for="(value, key, index) in object">
	    {{ index + 1 }}. {{ key }} : {{ value }}
	  </li>
	</ul>

	<hr>

	<div id="app1">
		<span v-for="n in 10">{{ n }}</span>
	</div>

	<hr>

	<div id="app2">
		<ul>
			<li v-for="n in evenNumbers">{{ n }}</li>
		</ul>
	</div>

	<script src="node_modules/vue/dist/vue.min.js"></script>
	<script>
		var app1 = new Vue({
		  el: '#example-2',
		  data: {
		    parentMessage: 'Parent',
		    items: [
		      { message: 'Foo' },
		      { message: 'Bar1' },
		      { message: 'Bar2' },
		      { message: 'Bar3' },
		      { message: 'Bar4' }
		    ]
		  }
		});

		/////////////////////////////////////

		new Vue({
		  el: '#repeat-object',
		  data: {
		    object: {
		      FirstName: 'John',
		      LastName: 'Doe',
		      Age: 30
		    }
		  }
		});

		//////////////////////////////////

		new Vue({
			el: '#app1'
		});

		//////////////////////////////////
		var app2 = new Vue({
			el: '#app2',
			data: {
				nums: [1, 2, 3, 4, 5]
			},
			computed: {
				evenNumbers: function() {
					return this.nums.filter(function(num) {
						return num % 2 == 0;
					});
				}
			}
		});

	</script>
</body>
</html>